<template>
  <div class="app-container">
    <el-table :data="stockList">
      <el-table-column
        label="物料编码"
        align="center"
        prop="code"
      />
      <el-table-column
        label="物料名称"
        align="center"
        prop="name"
      />
      <el-table-column label="供应商" align="center" prop="supplierName" />
      <el-table-column label="采购时间" align="center" prop="orderTime" />
      <el-table-column label="采购数量" align="center" prop="num" />
      <el-table-column label="退货数量" align="center" prop="returnNum" />
      <el-table-column label="单价" align="center" prop="price" />
      <el-table-column label="单据类型" align="center" prop="typeStr" />
      <el-table-column
        label="单据编号"
        align="center"
        prop="orderNumber"
      />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <div
      id="myChart"
      class="enterpriseChart"
      :style="{ width: '910px', height: '500px' }"
    ></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { getEnterpriseList, getEnterpriseView } from "@/api/system/order";

export default {
  name: "StockDetial",
  data() {
    return {
      id: null,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        status: "1",
        materialId: null,
      },
      charts: "",
      dateData: [],
      priceData: [],
      stockList: [],
      supplierData: [],
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getList();
    this.getView();
  },
  methods: {
    getList() {
      this.queryParams.materialId = this.id;
      getEnterpriseList(this.queryParams).then((response) => {
        this.stockList = response.rows;
        this.total = response.total;
      });
    },
    getView() {
      this.queryParams.materialId = this.id;
      getEnterpriseView(this.queryParams).then((response) => {
        this.dateData = response.data.dateData;
        this.priceData = response.data.priceData;
        this.supplierData = response.data.supplierData;
        this.$nextTick(function () {
          this.drawLine("myChart");
        });
      });
    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["供应商"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dateData,
        },
        yAxis: {
          type: "value",
        },

        series: [
          {
            name: "供应商",
            type: "line",
            stack: "总量",
            data: this.priceData,
          },
        ],
      });
    },
  },
};
</script>

<style>
.enterpriseChart {
  margin-left: 200px;
  padding-top: 50px;
}
</style>
